<template>
  <div class="element-index">
    <header-nav :title="title"></header-nav>
    <div class="flex">
      <div class="left">
        <element-nav></element-nav>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import ElementNav from '@/components/ElementNav.vue'
import HeaderNav from '@/components/HeaderNav.vue'
export default {
  name: 'ElementIndex',
  components: {
    ElementNav,
    HeaderNav
  },
  data() {
    return {
      title: 'Element-Plus练习管理系统'
    }
  }
}
</script>

<style lang="scss">
.element-index {
  .flex {
    .left {
      width: 300px;
      min-width: 300px;
    }
    .right {
      flex: 1;
      height: calc(100vh - 84px);
      overflow: auto;
    }
  }
}
</style>
